<template>
	<view class="member-list">
		<view class="search-box">
			<uni-icons @click="searchResult" size="40rpx" color="#aaa" type="search"></uni-icons>
			<input type="text" placeholder="搜索" :value="searchValue" @input="searchInput" placeholder-style="color: #aaa;" confirm-type="send" @confirm="searchResult">
		</view>
		<view class="administrator" v-if="adminLeader.length>0">
			<view class="h2">
				<text>群主/管理员（{{adminLeader.length}}人）</text>
				<text class="edit-members" v-if="options.type == 'see' && options.level != 1" @click="deleteMeber = !deleteMeber">{{deleteMeber?'取消':'编辑'}}</text>
			</view>
			<view class="item" v-for="(stu, index) in adminLeader" :key="index" @click="confirmSelect(stu)">
				<view class="images">
					<image class="img" :src="utils.headImage(stu)" mode="aspectFill"></image>
					<text class="name">{{stu.name}}</text>
					<text :class="['tag', {tag2: stu.level!=1}]">{{stu.level==2?'管理员':stu.level==0?'群主':''}}</text>
				</view>
				<uni-icons v-if="deleteMeber&&stu.level!=0&&stu.accountId!=currentAccountId" :type="deleteIds.indexOf(stu.accountId)!=-1?'checkbox-filled':'circle'" size="44rpx" :color="deleteIds.indexOf(stu.accountId)!=-1?'#55acee':'#d7d7d7'" />
				<!-- 使用用户id -->
				<uni-icons v-else-if="options.type=='manage'&&stu.level==2" :type="stu.id==selectUserInfo.id?'checkbox-filled':'circle'" size="44rpx" :color="stu.id==selectUserInfo.id?'#55acee':'#d7d7d7'" />
			</view>
		</view>
		<view class="group-members" v-if="studentList.length>0">
			<view class="h2">
				群成员（{{studentList.length}}人）
			</view>
			<view class="item" v-for="(stu, index) in studentList" :key="index" @click="confirmSelect(stu)">
				<view class="images">
					<image class="img" :src="utils.headImage(stu)" mode="aspectFill"></image>
					<text class="name">{{stu.name || stu.wxNickname}}</text>
				</view>
				<!-- 使用用户id -->
				<uni-icons v-if="deleteMeber" :type="deleteIds.indexOf(stu.accountId)!=-1?'checkbox-filled':'circle'" size="44rpx" :color="deleteIds.indexOf(stu.accountId)!=-1?'#55acee':'#d7d7d7'" />
				<uni-icons v-else-if="options.type=='manage'||options.type=='del'" :type="stu.id==selectUserInfo.id?'checkbox-filled':'circle'" size="44rpx" :color="stu.id==selectUserInfo.id?'#55acee':'#d7d7d7'" />
			</view>
		</view>
		<view class="del-box-fixed" v-if="deleteMeber">
			<view class="del-box" @click="delMembers()">
				<text :style="{color: deleteIds.length>0?'#D9001B':'gray'}">删除</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			options: {}, // 接收的参数 群id 和 操作类型type
			studentList: [], // 学生列表
			adminLeader: [], // 管理员和群主
			selectUserInfo: {}, // 当前选择的成员信息
			searchValue: '', // 搜索字段 成员姓名
			allMembers: [], // 群成员列表
			deleteMeber: false, // 删除群成员
			deleteIds: [], // 需要删除的成员账号id
			currentAccountId: '' // 当前用户的账号id
		}
	},
	onLoad(options) {
		this.currentAccountId = uni.getStorageSync('tokenObj').accountId
		this.options = options
		this.getMembers()
	},
	methods: {
		// 搜索 输入内容时触发
		searchInput(e){
			this.searchValue = e.detail.value;
		},
		// 返回搜索结果
		searchResult(){
			this.adminLeader = [];
			this.studentList = [];
			for(let i=0; i<this.allMembers.length; i++){
				let info = this.allMembers[i]
				let name = info.name || info.wxNickname
				if(name.indexOf(this.searchValue)!=-1){
					// 判断是否是普通成员
					if(info.level!=1){
						this.adminLeader.push(info)
					} else {
						this.studentList.push(info)
					}
				}
			}

		},
		confirmSelect(info){
			// @成员时
			if(this.options.tribute==1){
				uni.setStorageSync('xd_tribute_info', info)
				this.utils.goBack()
				return
			}
			// level 0 是群主  1 普通成员  2 管理员
			// 点击群主时，return
			if(this.options.type&&info.level == 0) {
				return
			}
			// 点击编辑时，选择群成员
			if(this.deleteMeber){
				let inx = this.deleteIds.indexOf(info.accountId)
				if(inx == -1){
					this.deleteIds.push(info.accountId);
				}else{
					this.deleteIds.splice(inx, 1)
				}
				return
			}
			let text = ''; // 提示内容
			this.selectUserInfo = info;
			if(this.options.type == 'manage'){
				// 设置或取消群管理员
				text = `确定选择 ${info.name} 为群管理员？`
				if(info.level == 2){
					text = `要删除群管理员 ${info.name} ？`
				}
				this.utils.showModal('', text, this.updateGroupManage)
			}else if(this.options.type=='leader'){
				// 转让群主
				text = `确定选择 ${info.name} 为新群主，你将自动放弃群主身份`
				this.utils.showModal('', text, this.updateGroupLeader)
			}else{
				// 跳转至用户详情页
				this.utils.userDetails(info.accountId, info.userType)
			}
			
			
		},
		// 转让群主
		updateGroupLeader(){
			this.api.post('chatGroupManage/updateGroupLeader', {
				chatGroupId: this.options.id,
				accountId: this.selectUserInfo.accountId
			}).then(res => {
				if(res.data.state == 'ok') {
					// 返回到群聊设置页面
					uni.navigateBack({
						delta: 2
					})
				}
				
			})
		},
		// 删除群成员
		delMembers(){
			// 没有选择可删除的群成员
			if(this.deleteIds.length == 0){ 
				this.utils.showToast('您还没有选择群成员')
				return
			}
			// 确认删除
			let delFun = () => {
				// 调用接口
				this.api.post('chatGroupManage/kickOutChatGroup', {
					chatGroupId: this.options.id,
					accountIds: JSON.stringify(this.deleteIds)
				}).then(res => {
					if(res.data.state == 'ok'){
						this.utils.showToast('删除成功')
						this.getMembers()
					}
				})

			}
			this.utils.showModal('', '确认删除？', delFun)
		},
		// 修改管理员
		updateGroupManage(){
			let flag = this.selectUserInfo.level==2?false:true
			this.api.post('chatGroupManage/updateGroupManage', {
				chatGroupId: this.options.id,
				accountId: this.selectUserInfo.accountId,
				flag: flag
			}).then(res => {
				if(res.data.state == 'ok') {
					// 清除当前选择的用户信息 并重新获取群成员
					this.selectUserInfo = {}
					this.getMembers()
				}
				
			})
		},
		// 获取群成员
		getMembers(){
			this.adminLeader = [];
			this.studentList = [];
			this.api.get('chatGroupManage/findMembersByGroupId', {
				groupId: this.options.id
			}).then(res => {
				if(res.data.state != 'ok') {
					return
				}
				let info = res.data.members || [];
				this.allMembers = info;
				// 把普通群成员和群管理分开存储，方便展示
				for(let i=0; i<info.length; i++){
					let level = info[i].level;
					if(level!=1){
						this.adminLeader.push(info[i])
					} else {
						this.studentList.push(info[i])
					}
				}
			})
		}
	}
}
</script>
<style lang="less">
	.member-list{
		.search-box{
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 0 32rpx;
			border-bottom: 2rpx solid #f2f2f2;
			input{
				font-size: 24rpx;
				padding-left: 20rpx;
				width: 90%;
			}
		}
		.h2{
			padding: 32rpx 0 16rpx;
			font-size: 24rpx;
			color: #aaa;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.edit-members{
				color: #35B6EE;
			}
		}
		.administrator, .group-members{
			margin: 0 32rpx;
		}
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			.images{
				display: flex;
				align-items: center;
			}
			.img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
			.name{
				font-size: 26rpx;
				margin: 0 24rpx;
			}
			.tag{
				padding: 0 16rpx;
				background-color: #fadade;
				color: #D9001B;
				font-size: 24rpx;
				&.tag2{
					background-color: #edf6fa;
					color: #35B6EE;
				}
			}
		}
	}
	.del-box-fixed{
		background: #fff;
		height: 80rpx;
	}
	.del-box{
		border-top: 1rpx solid #EEEEEE;
		position: fixed;
		bottom: 0;
		left: var(--window-left);
		right: var(--window-right);
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		padding: 0 32rpx;
		color: #D9001B;
	}
</style>